<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>PlantUML-Tools</title>
<script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/webjars/layui/layui.js}"></script>
<link rel="stylesheet" th:href="@{/webjars/layui/css/layui.css}" />
<style type="text/css">
.x-admin-backlog .x-admin-backlog-body {
    display: block;
    padding: 10px 15px;
    background-color: #f8f8f8;
    color: #999;
    border-radius: 2px;
    transition: all .3s;
    -webkit-transition: all .3s
}

html {
    overflow: -moz-hidden-unscrollable;
    height: 100%;
}

body::-webkit-scrollbar {
    display: none;
}

body {
    -ms-overflow-style: none;
    height: 100%;
    width: calc(100vw + 18px);
    overflow: auto;
}
</style>
</head>
<body>
<div class="layui-main site-inline">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>PlantUML-Tools</legend>
	</fieldset>
	
	<blockquote class="layui-elem-quote">plantUML&nbsp;模块组件生成工具</blockquote>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>project info</legend>
    </fieldset>
    
    <form class="layui-form" action="">
      <div class="layui-form-item">
	    <label class="layui-form-label">项目路径</label>
	    <div class="layui-input-block">
	      <input type="text" id="projectFilePath" name="projectFilePath" autocomplete="off" placeholder="请输入 项目路径" lay-verify="required" class="layui-input">
	      <input type="text" id="showComponentId" name="showComponent" value="false" hidden="true">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">组件视图是否增加组件</label>
	    <div class="layui-input-block">
	      <input type="checkbox" lay-skin="switch" lay-filter="showComponentFilter" lay-text="显示|不显示">
	    </div>
	  </div>
	  <div class="layui-form-item">
          <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submitFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
      </div>
    </form>
    
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	  <legend>plantUML</legend>
	</fieldset>
	
	<div class="layui-form-item">
         <label class="layui-form-label">组件视图</label>
         <div class="layui-input-block">
             <textarea class="layui-textarea" rows="10" id="modulesId" readonly="readonly"></textarea>
         </div>
    </div>
    <div class="layui-form-item">
         <label class="layui-form-label">关系视图</label>
         <div class="layui-input-block">
             <textarea class="layui-textarea" rows="10" id="relationsId" readonly="readonly"></textarea>
         </div>
    </div>
    
    <blockquote class="layui-elem-quote">
        <p>© 2020 <a href="https://woodwhales.cn/" target="_blank">woodwhales's blog</a>&nbsp;木鲸鱼</p>
    </blockquote>
    
</div>
     
<script>
	layui.use(['form', 'layedit', 'layer'], function(){
	  var form = layui.form
	  ,layer = layui.layer
	  ,layedit = layui.layedit;
	
    form.on('switch(showComponentFilter)', function(data){
	    if(this.checked) {
	    	$('#showComponentId').val('true');
	    } else {
	    	$('#showComponentId').val('false');
	    }
	}); 
	  
	form.on('submit(submitFilter)', function(data) {
		var index =layer.load(2, { shade: [0.1,'#fff'] });
		$.ajax({
			url:'./generate',
			type:'post',
			dataType:'json',
			contentType:"application/json",
			async:true,
			cache:false,
			data:JSON.stringify(data.field),
		    
		    success:function(res) {
		    	$('#modulesId').html(res.data.modules);
		    	$('#relationsId').html(res.data.relations);
		    	layer.close(index);
		    },
		    error:function(res) {
		    	layer.close(index);
		    	layer.msg('网络异常', {icon: 5});
		    }
		});
		
		return false;
		
		});
	});
</script>
</body>
</html>